<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Vue.js-->
    <script src="plugins/vue/dist/vue.min.js"></script>

</head>

<body>
    <div id="app">
        <button type="button" @click="add()" >添加</button>
        <button type="button" @click="get()" >获取</button>
        <button type="button" @click="remove()" >移出</button>
        <br>
        <button type="button" @click="add1()" >添加</button>
        <button type="button" @click="get1()" >获取</button>
        <button type="button" @click="remove1()" >移出</button>
    </div>

</body>
<script>
    /*
        前端存储有两个js对象
            localStorage: 只要不手动删除 就一直存在 【生命周期太长】 存储数据会不会有问题
            sessionStorage: 新开一个窗口 存储的数据就不在了

            获取数据： getItem(key)
            设置数据：setItem（key,value）
            移出数据：removeItem（key） 移出指定的key的内容
     */
    new Vue({
        el:"#app",
        methods:{
            add(){
                localStorage.setItem("name","德玛西亚")
            },
            get(){
               let value = localStorage.getItem("name");
               console.debug(value)
            },
            remove(){
                localStorage.removeItem("name")
            },
            add1(){
                sessionStorage.setItem("intro","草丛伦")
            },
            get1(){
               let value = sessionStorage.getItem("intro");
               console.debug(value)
            },
            remove1(){
                sessionStorage.removeItem("intro")
            }

        }


    })

</script>
</html>